<!--  -->
<template>
  <div>
    <el-form label-position="left">
      <el-row :gutter="50">
        <el-col :span="8">
          <el-form-item label="方案名称：" label-width="95px">
            {{planData.scheme_name}}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="流水号：" label-width="95px">
            {{planData.scheme_no}}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="方案所属项目：" label-width="120px">
            {{planData.scheme_project_name}}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="方案编号：" label-width="95px">
            {{planData.scheme_code}}
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="版本号：" label-width="95px">
            {{planData.version_no}}
          </el-form-item>
        </el-col>

        <el-col :span="24" v-if="$route.query.f_id && planData.change_reason ">
          <el-form-item label="变更原因：" prop="scheme_name" label-width="95px">
            {{planData.change_reason}}
          </el-form-item>
        </el-col>
      </el-row>

      <item-title title="稳定性方案明细" :borderShow="false"/>
      <div class="card">
        <el-row :gutter="10">
          <!--已选方案-->
          <el-col :span="6">
            <el-card class="box-card" shadow="nerver">
              <div slot="header" class="clearfix">
                <span>已选方案</span>
              </div>
              <div id="scrollBox">
                <el-tree :data="conditionsInve" :props="defaultProps" default-expand-all>
                </el-tree>
              </div>
            </el-card>
          </el-col>

          <!--添加样品-->
          <el-col :span="6">
            <el-card class="box-card" shadow="nerver">
              <div slot="header" class="clearfix">
                <span>设置样品</span>
              </div>
              <div id="scrollBox">
                <ul class="ul">
                  <li style="display: flex;justify-content: space-between;"
                      v-for="item in sampleList" :key="item.sample_name + '22'"
                      @click="handlSampleAdd(item)">
                    <div :class=" booleColor === item.id ? 'titleColor' : ''">{{item.sample_name}}</div>
                  </li>
                </ul>
              </div>
            </el-card>
          </el-col>

          <!--设置考察类型-->
          <el-col :span="6">
            <el-card class="box-card" shadow="nerver">
              <div slot="header" class="clearfix">
                <span>设置考察类型</span>
              </div>
              <div id="scrollBox" v-if="conditionsInve.length > 0">
                <el-checkbox-group v-model="conditionsInve[tabsIndex].list" disabled>
                  <ul class="ul">
                    <li v-for="(item,index) in InvestigationList" :key="index + ';'">
                      <el-checkbox disabled :label="item.id">{{item.inspect_type_name}}
                      </el-checkbox>
                    </li>
                  </ul>
                </el-checkbox-group>
              </div>
            </el-card>
          </el-col>

          <!--设置放置条件-->
          <el-col :span="6">
            <el-card class="box-card" shadow="nerver">
              <div slot="header" class="clearfix">
                <span>设置放置条件</span>
              </div>
              <div id="scrollBox">
                <el-tabs tab-position="left" v-model="tabsName" @tab-click="handlTabs"
                         v-if="conditionsInve && conditionsInve.length > 0">
                  <el-tab-pane v-for="(item) in conditionsInve[tabsIndex].conditions"
                               :key="item.name + '33'" :label="item.label" :name="item.name">
                    <el-checkbox-group v-model="item.list" disabled
                                       v-if=" conditionsInve[tabsIndex].conditions.length > 0">
                      <ul class="ul" v-if="item.conditionsList">
                        <li v-for="(ite,idex) in item.conditionsList" :key="idex + 'kk'">
                          <el-checkbox :label="ite.place_conditions.id" disabled>
                            {{ite.place_conditions.place_conditions_name}}
                          </el-checkbox>
                        </li>
                      </ul>
                    </el-checkbox-group>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </el-card>
          </el-col>

        </el-row>
      </div>

      <!--      <item-title title="稳定性仪器信息" :borderShow="false"/>-->
      <!--      <el-row :gutter="10">-->
      <!--        <el-col :span="24">-->
      <!--          <el-table :data="planData.stability_instrument_infos" class="table1" border-->
      <!--                    style="width: 100%">-->
      <!--            <el-table-column prop="instrument_no" label="编号" align="center"/>-->

      <!--            <el-table-column prop="instrument_name" label="仪器名称" align="center"/>-->

      <!--            <el-table-column prop="brand_model" label="品牌类型" align="center"/>-->

      <!--            <el-table-column prop="attrs" label="参数设置" align="center"/>-->

      <!--          </el-table>-->
      <!--        </el-col>-->
      <!--      </el-row>-->

    </el-form>

    <el-dialog title="样品详情" :visible.sync="open" width="600px" append-to-body
               :before-close="cancel" :close-on-click-modal="false" v-if="open">
      <el-form ref="formOpen" :model="formOpen" size="small">
        <el-form-item label="样品名称：" label-width="95px">
          {{formOpen.sample_name}}
        </el-form-item>
        <el-form-item label="样品类型：" label-width="95px">
          {{formOpen.sample_type_info.same_type_name}}
        </el-form-item>
        <el-row :gutter="20" v-for="(item,index) in formOpen.batch_info" :key="index">
          <el-col :span="12">
            <el-form-item label="样品批号：" label-width="95px">
              {{item.sample_batch}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="样品批量：" label-width="95px">
              {{item.batch_num}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="样品规格：" label-width="95px">
              {{formOpen.packaging_nu === 0 ?'/' : formOpen.packaging_nu }}
              {{formOpen.packaging_nu_unit}}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="包装单位：" label-width="95px">
              {{formOpen.packaging_unit}}
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="生产厂家：" label-width="95px">
          {{formOpen.producer}}
        </el-form-item>
        <el-form-item label="生产日期：" label-width="95px">
          <span v-if="formOpen.manufacture_date">{{dateFormat1('yyyy-mm-dd',formOpen.manufacture_date)}}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button plain size="small" @click="cancel">取 消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    projectList,
    Investigation,
    placeConditions, sampleDown
  } from '@/api/stability/giveUp'

  export default {
    props: {
      planData: {
        type: Object,
        default: function() {
          return {
            stability_instrument_infos: [],
            stability_details: []
          }
        }
      },
      sampleList: {
        type: Array,
        default: function() {
          return []
        }
      },
      checlSamp: {
        type: Array,
        default: function() {
          return []
        }
      },
      conditionsInve: {
        type: Array,
        default: function() {
          return []
        }
      }
    },
    data() {
      return {
        projectList: [],
        defaultProps: {
          children: 'conditions',
          label: 'label'
        },
        tabsNameInve: '',
        InvestigationList: [],
        tabsIndex: 0,
        tabsName: '',
        booleColor: -1,
        open: false,
        formOpen: {},
        sampleType: []
      }
    },
    //是计算属性，也可以理解为一个方法。
    computed: {},
    //属性是手动定义的所需监听的值
    watch: {
      conditionsInve: {
        handler: function(newValue, oldValue) {
          if (newValue.length > 0) {
            this.booleColor = Number(newValue[0].name)
            let a = this.conditionsInve[0].conditions[0]
            if (a) {
              this.tabsName = a.name
              this.handlPace(a.name)
            }

          }
        }
      }

    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {
      this.projectListData()
    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
      Investigation().then(res => {
        if (res.code === 200) {
          this.InvestigationList = res.data || []
        }
      })
      sampleDown().then(res => {
        if (res.code === 200) {
          this.sampleType = res.data || []
        }
      })
    },
    //是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，
    methods: {
      projectListData: function() {
        projectList().then(res => {
          if (res.code === 200) {
            this.projectList = res.data.data || []
          }
        })
      },

      cancel() {
        this.open = false
      },

      handlSampleAdd(val) {
        this.open = true
        this.formOpen = val
        this.booleColor = val.id
        let index = this.conditionsInve.findIndex(a => a.name == val.id)
        if (index !== -1) {
          this.tabsIndex = index
          let a = this.conditionsInve[index].conditions[0]
          if (a) {
            this.tabsName = a.name
            this.handlPace(a.name)
          }
        }
      },

      handlTabs: function(val) {
        this.tabsName = val.name
        this.handlPace(val.name)
      },

      handlPace: function(val) {
        placeConditions(val).then(res => {
          if (res.code === 200) {
            let index = this.conditionsInve[this.tabsIndex].conditions.findIndex(
              a => a.name === this.tabsName
            )
            if (index !== -1) {
              this.$set(this.conditionsInve[this.tabsIndex].conditions[index], 'conditionsList', res.data)
            }
          }
        })
      }

    }
  }
</script>
<style scoped>
  /* @import url(); 引入css类 */
  .el-card {
    height: 260px;
  }

  ::v-deep .el-card__header {
    background: #f5f5f5;
    font-size: 16px;
    line-height: 20px;
  }

  ::v-deep .el-card__body {
    height: 220px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  ::v-deep #scrollBox {
    height: 100% !important;
    flex: 1 !important;
    overflow-y: auto !important;
    color: #000;
    font-size: 16px;
  }

  ::v-deep #scrollBox::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::v-deep #scrollBox::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background: #cccccc;
  }

  ::v-deep #scrollBox::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }

  .ul {
    margin: 0;
    padding: 0;
  }

  .ul li {
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .ul li:hover {
    background-color: rgb(248, 248, 248);
    cursor: pointer;
  }

  .titleColor {
    color: #409eff;
  }

  ::v-deep .el-tabs__item {
    width: 130px;
    text-align: center !important;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  ::v-deep .table1 tr td {
    padding: 0 !important;
    height: 48px !important;
    overflow: visible !important;
    line-height: 48px;
  }

  ::v-deep .table1 tr td .cell {
    height: 30px !important;
    overflow: visible !important;
    line-height: 30px;
  }

  ::v-deep .item_form {
    overflow: hidden;
  }
</style>
